<template>
  <div class="orderdetails" v-loading="loading">
    <p>收费记录：</p>
    <el-table :data="tableData">
      <el-table-column label="订单号" prop="orderCode" align="center" width="160"></el-table-column>
      <el-table-column label="交易流水号" prop="tradeNo" align="center" width="136"></el-table-column>
      <el-table-column label="应收金额" prop="payableAmount" align="center"></el-table-column>
      <el-table-column label="实收金额" prop="paidAmount" align="center"></el-table-column>
      <el-table-column label="支付时间" prop="payTime" align="center" width="150"></el-table-column>
      <el-table-column label="交易类型" prop="tradeType" align="center"></el-table-column>
      <el-table-column label="支付类型" prop="payTypeText" align="center" width="110"></el-table-column>
      <el-table-column label="支付状态" align="center">
        <template slot-scope="scope">
          {{ scope.row.payStatus | payStatusFilter}}
        </template>
      </el-table-column>
    </el-table>

    <p style="margin-top: 20px;">
      泊链历史订单：
      总金额：{{totalMoney}}元
    </p>
    <el-table :data="bolianData">
      <el-table-column label="车牌号" prop="car_number" align="center"></el-table-column>
      <el-table-column label="进场时间" prop="in_time" align="center" width="150"></el-table-column>
      <el-table-column label="出场时间" prop="out_time" align="center"  width="150"></el-table-column>
      <el-table-column label="金额" prop="money" align="center"></el-table-column>
      <el-table-column label="停车场名称" prop="park_name" align="center"></el-table-column>
      <el-table-column label="交易流水号" prop="trade_no" align="center"></el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { formatDate } from '@/utils/formatDate.js'
  export default {
    name: 'orderdetails',
    props:['row'],
    filters: {
      payStatusFilter(status) {
        if(status == 0) return '待支付'
        if(status == 1) return '已支付'
        if(status == 2) return '取消支付'
        if(status == 3) return '支付失败'
      }
    },
    data() {
      return {
        detailsForm: {},
        tableData: [],
        loading: true,
        bolianData: [],
        totalMoney: 0
      }
    },
    mounted() {
      this.getDetailsForm();
      this.getBolianOrderByOrderCode();

    },
    methods: {
      getDetailsForm() {
        this.$axios({
          method: 'get',
          url: '/order/trade-record/getOrderTradeRecordByOrderCode',
          params: { orderCode: this.row.orderCode }
        }).then((res) => {
          if(res.code == 200) {
            this.tableData = res.data;
            this.loading = false;
          }
        })
      },
      getBolianOrderByOrderCode() {
        this.$axios({
          method: 'post',
          url: '/order/trade-record/getBolianOrderByOrderCode',
          data: this.$qs.stringify({orderCode: this.row.orderCode})
        }).then((res) => {
          res.data.data.forEach((order)=> {
            order.in_time = formatDate(new Date(parseInt(order.in_time) * 1000), 'yyyy-MM-dd hh:mm:ss')
            order.out_time = formatDate(new Date(parseInt(order.out_time) * 1000), 'yyyy-MM-dd hh:mm:ss')
          })
          this.bolianData = res.data.data;
          this.totalMoney = res.data.totalMoney;
        })
      }
    }
  }
</script>

<style scoped>
  .orderdetails {
    padding: 0 20px;
  }
  
  .el-form-item {
    margin: 0;
    padding: 0;
  }
  
  p {
    margin: 0;
    padding: 0;
  }
  
  .carNum {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
  }



</style>
